<template>
    <div class="home">
        <div class="banner">
            <div class="banxin">
                <img src="../assets/images/home/banner.png" alt="">
            </div>
        </div>
        <Title :src="Recommend" title="精品推荐" />
        <Products :arr="records" />
        <Title :src="hot" title="热门兑换" />
        <img src="http://sc.wolfcode.cn/assets/integralMall/img/users/banner.png" class="ad banxin" alt="">
        <Products :arr="hot" />

        <div class="integra banxin">
            <Title :src="integral" title="积分攻略" />
            <ul class="tanxin">
                <li>
                    <h4>签到得鸡腿</h4>
                    <div class="btn">去签到</div>
                </li>
                <li>
                    <h4>购课得鸡腿</h4>
                    <div class="btn">去购课</div>
                </li>
                <li>
                    <h4>推荐得鸡腿</h4>
                    <div class="btn">去推荐</div>
                </li>
                <li>
                    <h4>做任务得鸡腿</h4>
                    <div class="btn">去做任务</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { JingpinApi, HotApi } from '@/request/api'
import Title from '@/components/home/Title.vue';
import Products from '@/components/Products.vue';
export default {
    data() {
        return {
            Recommend: require("../assets/images/home/Recommend.png"),
            hot: require("../assets/images/home/hot.png"),
            integral: require("../assets/images/home/integral.png"),
            records: [],
            hot: []
        }
    },
    components: {
        Title,
        Products
    },
    created() {
        // 精品推荐
        JingpinApi().then((res) => {
            console.log(res.data.data.data.records);
            if (res.data.code === 0) {
                this.records = res.data.data.data.records;
            }
        });
        // 热门推荐
        HotApi().then((res) => {
            if (res.data.code === 0) {
                this.hot = res.data.data.data.records;
            }
        })
    }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

.banner {
    width: 100%;
    background-color: #fff;
    padding-bottom: 30px;

    img {
        display: block;
    }
}

.ad {
    display: block;
    margin-bottom: 30px;
}

.integra {
    background-color: #fff;
    padding-bottom: 48px;

    li {
        width: 285px;
        height: 168px;
        color: #fff;
        padding-left: 21px;
        padding-top: 43px;
        box-sizing: border-box;
        background-size: 100% 100%;
        transition: background-size .5s linear;
        cursor: pointer;

        h4 {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .btn {
            width: 90px;
            height: 27px;
            text-align: center;
            line-height: 27px;
            border: 1px solid #fff;
        }

        &:nth-of-type(1) {
            background-image: url(../assets/images/home/integral-01.png);
        }

        &:nth-of-type(2) {
            background-image: url(../assets/images/home/integral-02.png);
        }

        &:nth-of-type(3) {
            background-image: url(../assets/images/home/integral-03.png);
        }

        &:nth-of-type(4) {
            background-image: url(../assets/images/home/integral-04.png);
        }

        &:hover {
            background-size: 105% 105%;
        }
    }
}
</style>